<!-- -声明部分：作用是告诉浏览器html的类型-->
<!--  以下是html5的声明-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="html5day01.css">
<title>Insert title here</title>
</head>
<body>
	<!-- 预格式化文本
	pre 标签的文本通常会保留空格和换行符；
	pre 标签一般用来表示计算机的源代码；-->
	
	
	<pre>
	html5的表单新类型:
	email 
	url 
	number 
	range 
	Date pickers () 
	search 
	color 
	</pre>
	<form action="">
		<fieldset>
			<legend>表单新类型：email</legend>
			<label>邮件：</label>
			<input type="email" id="email" name="email">
		</fieldset>
		
		<fieldset>
			<legend>表单新类型：range</legend>
			<label>成绩区间：</label>
			<input type="range" id="score" name="score" min="0" 
			max="100" step="1" value="50" >
			<span id="scoreValue">50</span>
		</fieldset>
		<fieldset>
			<legend>表单新类型：url</legend>
			<input type="url" name="user_url" />
		</fieldset>
		
		
		<fieldset>
			<legend>表单新类型：number</legend>
			<label>number：</label>
			<input type="number" name="points" min="1" max="120" />
		</fieldset>
			
		<fieldset>
			<legend>表单新类型：Date pickers</legend>
			<label>date, month, week, time, datetime, datetime-local</label>
			<input type="datetime-local" name="user_date" />
		</fieldset>
		<fieldset>
			<legend>表单新类型：search</legend>
			<label>search：</label>
			<input type="search" name="user_date" />
		</fieldset>
		<fieldset>
			<legend>表单新类型：color</legend>
			<label>color：</label>
			<input type="color" name="color" />
		</fieldset>	

		
		<!-- 练习题 -->
		<fieldset id="rangefieldset1">
		   	<legend>滑动条来模拟RGB颜色</legend>
		   	<div>
				<div>
			    	<label>R:</label>
			    	<input type="range" name="rangeR" id="rangeR" 
			     	min="0" max="255" step="1" value="255">  
			    </div>
	    		<div>
			    	<label>G:</label>
			    	<input type="range" name="rangeG" id="rangeG" 
			     min="0" max="255" step="1" value="255">
		    	</div>
	    		<div>
			    	<label>B:</label>
			    	<input type="range" name="rangeB" id="rangeB" 
			     	min="0" max="255" step="1" value="255">
			    </div>
	  		</div>
	   
		   <!-- 显示背景色的div -->
		   <div id="colorDiv"></div>
		   
		   <div>
		    <span id="colorSpan1">rgb(255,255,255)</span>
		   </div>
		   <div>
		    <span id="colorSpan2">#ffffff</span>
		   </div>
	  	</fieldset>	
		
		<fieldset>
			<legend>按钮</legend>
			<input type="submit" value="提交">
		</fieldset>
	</form>
	
<script type="text/javascript" src="jquery-1.11.3.js"></script>	
<script type="text/javascript" src="html5day01.js"></script>	
</body>
</html>